<route lang="json5">
{
  style: {
    navigationBarTitleText: '一卡通充值',
  },
}
</route>
<template>
  <!-- <view class="u-wrap">
    <view class="list">
      <view
        v-for="(item, index) in arr"
        :key="index"
        :class="[index == activeIndex ? 'active' : '', 'item']"
        @click="getMoney(item, index)"
      >
        <view>
          <image
            style="width: 346px; height: 150px; object-fit: contain"
            src="https://szhy.artcollegehb.cn/school/file/school/fj/20250221/af459d28acd64fbca1e1d7290a3a6d41ykt.png"
          ></image>
        </view>
      </view>
    </view>
  </view> -->
  <view class="totup">
    <view
      v-for="(item, index) in arr"
      :class="[index == activeIndex ? 'active' : '', 'money-card']"
      :key="index"
      @click="getMoney(item, index)"
    >
      {{ item }}元
    </view>
    <!-- <view>200元</view>
    <view>500元</view>
    <view>1000元</view>
    <view>3000元</view>
    <view>5000元</view> -->
  </view>

  <view class="topupinstrcatian">
    <view class="topupinstructions">充值规则须知</view>
  </view>
  <view class="catin">
    会员等级实行动态升降级制度，会员等级会随最后一次充值金额而发生变动，以最后一次充值金额为准，例如:原账户为“黄金会员”，余额为4800，充值200元后，会员等级将变更为“普通会员”。
  </view>
  <view class="px-40 mt-[15rpx]">
    <text class="bg-color">充值200、500、1000元(订场等业务享9.5折，普通会员</text>
    <text>备注:室外足球、老年馆室内网球 不打折</text>
  </view>
  <view class="footer">
    <view class="flex">
      <view class="flex-center">￥</view>
      <view class="font-5 flex-center">{{ money }}</view>
    </view>
    <view class="flex-center">
      <view class="btn" @click="chongzhi">确认充值</view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserStore())
import { getCardByUserId, topUp } from '@/service/card/card' // 看这里
const {
  loading: cardLoading,
  error: cardError,
  data: cardData,
  run: cardRun,
} = useRequest(() => getCardByUserId(formdata.value))
const {
  loading: topUpLoading,
  error: topUpError,
  data: topUpData,
  run: topUpRun,
} = useRequest(() => topUp(topupData.value))

const activeIndex = ref(0)
const arr = [100, 200, 500, 1000, 3000, 5000, 10000, 30000, 50000]
const money = ref(100)
const cardId = ref('')

const formdata = ref({})

// 获取用户信息
// const userInfo = uni.getStorageSync('userInfo')
formdata.value.usrId = userInfo.value.id

const getMoney = (item: any, index: any) => {
  // console.log(666, 12312312)
  money.value = item
  activeIndex.value = index
}

const flag = ref(false)

const topupData = ref({})

const chongzhi = () => {
  topupData.value = {
    cardId: cardId.value,
    inMoney: money.value * 100,
    usrId: userInfo.value.id,
  }
  topUpRun().then((data) => {
    const payment = {
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.packageStr,
      signType: data.signType,
      paySign: data.paySign,
    }
    console.log(payment)
    wx.requestPayment({
      ...payment,
      success: function (res) {
        uni.navigateBack({ delta: 1 })
      },
      fail: function (error) {
        //  uni.navigateBack({ delta: 1 })
        uni.showToast({
          title: '支付失败',
          duration: 2000,
          icon: 'none',
        })
        console.log('支付失败')
        console.log(error)
      },
    })
  })
}

onLoad(() => {
  cardRun().then((res) => {
    cardId.value = res.id
  })
})
</script>

<style lang="scss" scoped>
.px-40 {
  padding: 0 40rpx;
}

.u-wrap {
  display: flex;
  flex-direction: column;
  // height: calc(60vh);
  // height: calc(100vh - var(--window-top));
  overflow: hidden;
}

.list {
  // padding: 20rpx;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300rpx;
  margin-top: 10px;
  font-size: 50rpx;
  color: black;
  border-radius: 15rpx;
}

.active {
  // color: #fff;
  // background: linear-gradient(to left, #ff7e5f, #fa915b);
  background-color: #fef8f8 !important;
  border: 1px solid #cda6a8;
}

.footer {
  position: fixed;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  width: 90%;
  height: 100rpx !important;
  margin-left: 5%;
  // padding: 0rpx 40rpx;
  color: #fb581d;
  background-color: #fefefe;
  border-top: 1rpx solid #eeeeee !important;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
  color: #ffffff;
  cursor: pointer;
  background: linear-gradient(to left, #ff7e5f, #fa915b);
  border: none;
  border-radius: 25px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.topupinstrcatian {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80rpx;
  padding: 0 40rpx;
  margin-top: 100rpx;
}

.topupinstructions {
  position: relative;
  display: inline-block;
  width: 100%;
  padding: 0 20rpx;
  text-align: center;
}

.topupinstructions::before,
.topupinstructions::after {
  position: absolute;
  top: 50%;
  width: 150rpx;
  height: 5rpx;
  content: '';
  background-color: #eaeaea;
}

.topupinstructions::before {
  left: 0;
  transform: translateY(-50%);
}

.topupinstructions::after {
  right: 0;
  transform: translateY(-50%);
}

.catin {
  padding: 0 40rpx;
  font-weight: bold;
  line-height: 1.5;
  color: black;
}

.bg-color {
  line-height: 1.5;
  color: #ababab;
}

.flex-center {
  display: flex;
  align-items: center;
}

.totup {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 0 20rpx;
  margin-top: 50rpx;
}

.money-card {
  width: 180rpx;
  height: 100rpx;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20rpx;
  border-radius: 5rpx;
}
</style>
